<template>
	<div class="backTop">
		<i class="iconfont" @click="backtop" v-show="toggleshow">&#xe709;</i>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.backTop{
		position: fixed;
		bottom: 80px;
		right: 4px;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		z-index: 999999;
		i{
			font-size: 30px;
			color: #22887d;
		}
	}
</style>

<script type="text/javascript">
	export default{
		data(){
			return{
				toggleshow:false
			}
		},
		components:{

		},
		methods:{
			// goTop(){
			// 	if(document.body.scrollTop||document.documentElement.scrollTop){
	  //    	   	 	document.body.scrollTop=0;
	  //    	   	 	document.documentElement.scrollTop=0;
	  //    	   	 }
			// },

			backtop(){
			    //回到顶部
			      window.scrollBy(0,-50); 
			      var timer = setTimeout(this.backtop,1);//自调
			      if(document.documentElement.scrollTop===0) clearTimeout(timer);
			      
			  },

			togglecol(){
				if((document.documentElement.scrollTop+document.body.scrollTop) > 50){
					this.toggleshow=true
				}
				else{
					this.toggleshow=false
				}
			}
		},
		mounted(){
			window.addEventListener('scroll',this.togglecol)
		}
	}
</script>